<template>
	<div class="bg-selector">
		<div class="selector-panel">
			<model-canvas :bg="bg"></model-canvas>
			<div class="list">
				<div
					class="swiper"
					v-for="item in bgList"
					:key="item"
					@click="imgClick(item)"
				>
					<img :src="item" />
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import modelCanvas from "./model-canvas.vue";

export default defineComponent({
	name: "bg-selector",
	components: {
		modelCanvas,
	},
	setup: () => {
		const bgList = [...window.$bg.list()];
		const bg = reactive({
			$img: "/origin.png",
			background: "white",
			backgroundImage: "",
		});

		function imgClick(src: string) {
			bg.$img = "/model.png";
			bg.backgroundImage = `url('${src}')`;
		}
		return {
			bg,
			bgList,
			imgClick,
		};
	},
});
</script>

<style lang="less">
.bg-selector {
	width: 100%;
	display: flex;
	margin-top: 5px;
	justify-content: center;
	.selector-panel {
		width: 600px;
		opacity: 0.8;
		display: flex;
		border-radius: 25px;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-color: lightgrey;
		box-shadow: darkgrey 10px 10px 30px 5px;
		.list {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			margin: 30px 0px;
			.swiper {
				width: 75px;
				height: 75px;
				margin: 10px;
				cursor: pointer;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					box-shadow: darkgrey 1px 1px 3px 1px;
				}
			}
		}
	}
}
</style>
